<template>
	<div style="display:flex;justify-content: space-between;margin:0 50px;" v-if="name"><div style="display:flex;"><img src="../assets/logo.png" style="width:70px;height:70px;margin-right:10px;"/><h1>图书管理系统</h1></div><div style="display:flex;"><h4>欢迎您，{{name}}</h4><h5 @click="outlogin" style="color: #409eff;margin-left:20px;text-decoration-line:underline;cursor: pointer;">退出登录</h5></div></div>
	<div style="display:flex;">
	<el-menu
	        class="el-menu-vertical-demo"
	        @open="handleOpen"
	        @close="handleClose"
			router
			:default-active="active"
			v-if="name"
	      >
	       
	        <el-menu-item index="/book">
	          <el-icon><icon-menu /></el-icon>
	          <span>图书管理</span>
	        </el-menu-item>
	        <el-menu-item index="/category">
	          <el-icon><document /></el-icon>
	          <span>图书分类</span>
	        </el-menu-item>
	        <el-menu-item index="/borrow">
	          <el-icon><setting /></el-icon>
	          <span>图书借阅</span>
	        </el-menu-item>
				  <el-menu-item index="/user">
				    <el-icon><setting /></el-icon>
				    <span>用户管理</span>
				  </el-menu-item>
				  <el-menu-item index="/role">
				    <el-icon><setting /></el-icon>
				    <span>角色管理</span>
				  </el-menu-item>
				  <el-menu-item index="/permission">
				    <el-icon><setting /></el-icon>
				    <span>权限管理</span>
				  </el-menu-item>
	      </el-menu>
		  <slot></slot>
		  </div>
</template>

<script setup>
	import {ref } from "vue"
	const name = ref("")
	const props = defineProps({
		active:{
			type:String,
			default:''
		}
	})
	name.value = window.localStorage.getItem("loginUser")
	console.log(name.value)
	
	const handleOpen = (key, keyPath) => {
	  console.log(key, keyPath)
	  // name.value = window.localStorage.getItem("loginUser")
	}
	const handleClose = (key, keyPath) => {
	  console.log(key, keyPath)
	}
	function outlogin(){
		window.localStorage.removeItem("token");
		window.localStorage.removeItem("loginUser");
		window.location.href="/login"
	}
</script>

<style>
</style>